import React, { useEffect, useState } from 'react';
import { Button, Modal } from 'antd';
import ButtonTab from '../../components/CreateteamCon/CreateteamButton';
import CCC from '../../components/CreateteamCon/Createteamzdybom';
import Box1 from '../../components/CreateteamCon/Createteambxo1';
import Pageage from '../../components/Package/Index';
import './Createteam.css';
import axios from 'axios';

// Tab样式
const TabButton = ({ active, onClick, children }) => (
  <button
    onClick={onClick}
    style={{
      padding: '10px 20px',
      backgroundColor: '#fff',
      border: 'none',
      borderBottom: active ? '2px solid #0773fc' : '2px solid #fff',
      color: active ? '#1b2337' : '#505a71',
      fontWeight: active ? '800' : '200',
      margin: '0 5px',
    }}
  >
    {children}
  </button>
);

const Index = () => {
  const [activeTab, setActiveTab] = useState(0);
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(true);
  const [lists, setLists] = useState([]);

  useEffect(() => {
    const fetchRecommended = async () => {
      try {
        const response = await axios.get('/api/CreateRecommended');
        setLists(response.data.data.CreateWhole);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchRecommended();
  }, []);

  const showLoading = () => {
    setOpen(true);
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  };

  const renderContent = (index) => {
    if (lists[index - 1]?.children) {
      return <Pageage arr={lists[index - 1].children} />;
    }
    return null;
  };

  return (
    <div className='CreateamBox'>
      <div className='top1'>
        <h2>创建设计</h2>
        <button className='zbtn' onClick={showLoading}>
          自定义尺寸
        </button>
      </div>
      <div className='set-data'>
        <div style={{ marginBottom: '20px' }}>
          {[...Array(12)].map((_, index) => (
            <TabButton
              key={index}
              active={activeTab === index}
              onClick={() => setActiveTab(index)}
            >
              {['全部', '智能设计', '海报', '公众号', '抖音/小红书', '电商', 'PPT/办公', '印刷物料', 'H5', '社交生活', '视频', '插画元素'][index]}
            </TabButton>
          ))}
        </div>
        <div>
          {activeTab === 0 && <Box1 />}
          {renderContent(activeTab + 1)}
        </div>
      </div>
      <Modal
        title={<p>自定义尺寸</p>}
        loading={loading}
        open={open}
        footer={null}
        onCancel={() => setOpen(false)}
        width={'900px'}
      >
        <div className='Createam-Con1'>
          <div className='Createam-Width'>
            <input type="number" placeholder='宽' />
            <p>×</p>
            <input type="number" placeholder='高' />
            <select name="" id="">
              <option value="px">px</option>
              <option value="cm">cm</option>
              <option value="mm">mm</option>
              <option value="in">in</option>
            </select>
            <Button type='primary'>创建设计</Button>
          </div>
          <div className='zdytab'>
            <ButtonTab />
          </div>
          <div className='Createam-CCC'>
            <CCC />
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default Index;